<script setup lang="ts">

defineOptions({name: 'Menu'})
import {useTable} from '@/composables/useTable'
import {formatEnumData, dateFormat, makeTree} from '@/utils/helper'
import {useI18n} from 'vue-i18n'
import {getMenuList} from '@/api/menu'
import {getEnumData} from '@/api/enum'
import {getLanguageData} from '@/api/language'
import Search from './modules/search.vue'
import Create from './modules/create.vue'
import Update from './modules/update.vue'

/**
 * 变量部分
 */
const {t} = useI18n()
const enumData = ref<any>({})
const enumDataFormat = ref<any>({})
const languageData = ref<any>({})
const createRef = ref()
const updateRef = ref()

onMounted(async () => {
	await getLanguage()
	await getEnum()
})

/**
 * 表格函数
 */
const {
	columns,
	columnChecks,
	data,
	loading,
	updateColumn,
	refreshData,
} = useTable({
	// 核心配置
	core: {
		apiFn: getMenuList,
		apiParams: {page: 1, limit: 1000},
		columnsFactory: () => [
			{prop: 'name', minWidth: 120},
			{prop: 'title', minWidth: 150},
			{prop: 'route', minWidth: 150},
			{prop: 'path', minWidth: 150},
			{prop: 'type', width: 100, useSlot: true},
			{prop: 'status', width: 95, useSlot: true, sortable: 'custom'},
			{
				prop: 'createTime', label: t('common.field.createTime'), width: 170, useSlot: true,
				sortable: 'custom',
			},
			{
				prop: 'updateTime', label: t('common.field.updateTime'), width: 170, useSlot: true,
				sortable: 'custom',
			},
			{prop: 'operate', label: t('common.operate'), width: 110, useSlot: true},
		]
	},
	// 数据处理
	transform: {
		responseAdapter: (response: any) => {
			const finalMenuList = makeTree(response.list, 'menuId', 'pid', 0)
			return {
				list: finalMenuList,
				total: finalMenuList.length,
				limit: response.limit,
				page: response.page
			}
		}
	}
})

/**
 * 获取枚举数据
 */
const getEnum = async () => {
	enumData.value = await getEnumData({modules: ['menu']})
	enumDataFormat.value = formatEnumData(enumData.value)
}

/**
 * 获取语言数据
 */
const getLanguage = async () => {
	const res: any = await getLanguageData({modules: ['menu']});
	languageData.value = {...res};
	for (let key in res.menu.field) updateColumn?.(key, {label: res.menu.field[key]})
}

/**
 * 处理搜索重置
 * @param filterData
 */
const handleSearchReset = (filterData: any) => {
	console.log('handleSearchReset', filterData)
}

/**
 * 处理搜索确认
 * @param filterData
 */
const handleSearchConfirm = (filterData: any) => {
	console.log('handleSearchConfirm', filterData)
}

/**
 * 处理显示创建
 * @param id
 */
const handleShowCreate = (id?:number | undefined) => createRef.value.open(id)

/**
 * 处理显示更新
 * @param id
 */
const handleShowUpdate = (id:number | undefined) => updateRef.value.open(id)
</script>

<!-- art-full-height 自动计算出页面剩余高度 -->
<!-- art-table-card 一个符合系统样式的 class，同时自动撑满剩余高度 -->
<!-- 更多 useTable 使用示例请移步至 功能示例 下面的 高级表格示例 -->
<template>
	<div class="art-full-height">
		<!-- 搜索栏 -->
		<Search :enumData="enumData" :languageData="languageData" @reset="handleSearchReset"
			@search="handleSearchConfirm"/>

		<ElCard class="art-table-card" shadow="never">
			<!-- 表格头部 -->
			<ArtTableHeader v-model:columns="columnChecks" :loading="loading" @refresh="refreshData">
				<template #left>
					<ElSpace wrap>
						<ElButton v-auth="'menuCreate'" @click="handleShowCreate(undefined)" v-ripple>
							{{ t('common.create') }}
						</ElButton>
					</ElSpace>
				</template>
			</ArtTableHeader>

			<!-- 表格 -->
			<ArtTable
				rowKey="menuId"
				:loading="loading"
				:data="data"
				:columns="columns"
				:show-overflow-tooltip="true"
			>
				<template #operate="{row}">
					<ArtButtonTable v-auth="'menuCreate'" type="add" @click="handleShowCreate(row.menuId)"/>
					<ArtButtonTable v-auth="'menuUpdate'" type="edit" @click="handleShowUpdate(row.menuId)"/>
				</template>
				<template #type="{row}">
					<template v-if="enumDataFormat.menu">
						<template v-if="row.type === 1">
							<ElTag type="primary">
								{{ enumDataFormat.menu.type[row.type] }}
							</ElTag>
						</template>
						<template v-if="row.type === 2">
							<ElTag type="info">
								{{ enumDataFormat.menu.type[row.type] }}
							</ElTag>
						</template>
					</template>
				</template>
				<template #status="{row}">
					<template v-if="enumDataFormat.menu">
						<template v-if="row.status === 1">
							<ElTag type="primary">
								{{ enumDataFormat.menu.status[row.status] }}
							</ElTag>
						</template>
						<template v-if="row.status === 2">
							<ElTag type="danger">
								{{ enumDataFormat.menu.status[row.status] }}
							</ElTag>
						</template>
					</template>
				</template>
				<template #createTime="{row}">{{ dateFormat(row.createTime) }}</template>
				<template #updateTime="{row}">{{ dateFormat(row.updateTime) }}</template>
			</ArtTable>
		</ElCard>
		<Create ref="createRef" :enumData="enumData" :languageData="languageData" @success="refreshData"/>
		<Update ref="updateRef" :enumData="enumData" :languageData="languageData" @success="refreshData"/>
	</div>
</template>

<style lang="scss" scoped>

</style>
